import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import cssModules from 'react-css-modules';
import classnames from 'classnames';
import {Form, Row, Button, Radio} from 'antd';
import {FormInput, FormSelect, FormItemCustom} from '../../component/FormItem';
import {addUnitInfo} from 'util/api';
import styles from './style.less';

@inject('StaffNewUsersStore', 'StaffStore')
@observer
@cssModules(styles)
class AddUnitContent extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.StaffNewUsersStore;
  }

  render() {
    const {fields, handleFormChange} = this.store;
    const {apartmentList} = this.props.StaffStore;
    let scale = Math.ceil((140 / 600) * 24);
    const formItemLayout = {
      labelCol: {
        sm: {span: scale},
      },
      wrapperCol: {
        sm: {span: 24 - scale},
      },
    };
    const CustomRadioComponent = props => {
      const {children = []} = props;

      return (
        <Row className={styles['custom-radio-wrap']}>
          {children.map((item, index) => {
            let isSelected = item.value === props[props.name].value;

            return (
              <Button
                key={index.toString(36)}
                className={classnames(
                  styles['radio-button'],
                  isSelected && styles['radio-selected'],
                )}
                onClick={() => {
                  let obj = {};
                  props[props.name]['value'] = item.value;
                  obj[props.name] = props[props.name];
                  handleFormChange(obj);
                }}>
                {item.name}
              </Button>
            );
          })}
        </Row>
      );
    };

    return (
      <Form
        {...formItemLayout}
        className={styles['add-users-wrap']}
        autoComplete="off">
        <FormInput
          {...fields}
          onChange={handleFormChange}
          placeholder={'请输入姓名'}
          label={'姓名'}
          disabled={false}
          name={'cname'}
          rules={[
            {
              required: true,
              message: '必须填写内容!',
            },
          ]}
        />
        <FormInput
          {...fields}
          onChange={handleFormChange}
          placeholder={'请输入手机号'}
          label={'手机号'}
          disabled={false}
          name={'phone'}
          rules={[
            {
              required: false,
              message: '必须填写内容!',
            },
            {
              pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
              message: '请输入正确的手机号码',
            },
          ]}
        />
        <FormInput
          {...fields}
          onChange={handleFormChange}
          placeholder={'请输入身份证号码'}
          label={'身份证号码'}
          disabled={false}
          name={'idCard'}
          rules={[
            {
              required: false,
              message: '必须填写内容!',
            },
            {
              pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
              message: '请输入正确的身份证号码',
            },
          ]}
        />

        <FormItemCustom
          {...fields}
          onChange={handleFormChange}
          placeholder={'请输入户籍'}
          label={'性别'}
          disabled={false}
          name={'sex'}
          rules={[
            {
              required: true,
              message: '必须填写内容!',
            },
          ]}
          children={[{value: '男', name: '男'}, {value: '女', name: '女'}]}
          RenderComponet={CustomRadioComponent}
        />

        <FormItemCustom
          {...fields}
          onChange={handleFormChange}
          placeholder={'请输入户籍'}
          label={'用户类型'}
          disabled={false}
          name={'userType'}
          rules={[
            {
              required: true,
              message: '必须填写内容!',
            },
          ]}
          children={[
            {value: 5, name: '保洁员'},
            {value: 6, name: '物管员'},
            {value: 7, name: '维修员'},
            {value: 8, name: '保安员'},
          ]}
          RenderComponet={CustomRadioComponent}
        />
      </Form>
    );
  }
}

export default AddUnitContent;
